<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" :title="title" width="1000px" @ok="handleOk" destroyOnClose
      @visible-change="visibleChange">
      <BasicTable :columns="columns" v-bind="config" :useSearchForm="true" :formConfig="formConfig" :api="queryTreeList"
        :searchInfo="searchInfo" :rowSelection="rowSelection" :indexColumnProps="indexColumnProps" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'productionRelated'">
            <a-tag :color="record.productionRelated === 1 ? 'volcano' : 'green'">
              {{ record.productionRelated === 1 ? "是" : "否" }}
            </a-tag>
          </template>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, unref,watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { queryTreeList } from '../../depart.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
import { useAttrs } from '/@/hooks/core/useAttrs';

export default defineComponent({
  name: 'DepartmentModal',
  components: {
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    ...selectProps,
    title: {
      type: String,
      default: '选择部门',
    },
    value: {
      type: String,
      default: null
    }
  },

  emits: ['register', 'getSelectResult'],
  setup(props, { emit }) {
    //注册弹框
    const [register, { closeModal }] = useModalInner();
    const attrs = useAttrs();
    //表格配置
    const config = {
      canResize: false,
      bordered: true,
      size: 'small',
      rowKey: 'id',
      labelKey: 'departName',
      isRadioSelection: true,
    };
    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
    const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult, selectOptions,selectValues }] = useSelectBiz(queryTreeList, getBindValue);

    const searchInfo = ref(props.params);
    //查询form
    const formConfig = {
      labelWidth: 80,
      labelCol: { span: 4 },
      schemas: [
        {
          label: '部门名称',
          field: 'orgCode',
          component: 'JInput',
          colProps: { span: 8 },
        },
        {
          label: '部门编码',
          field: 'departName',
          component: 'JInput',
          colProps: { span: 8 },
        }
      ],
    };
    const columns = [
      {
        title: '名称',
        dataIndex: 'departName',
        width: 100,
        align: 'left',
      },
      {
        title: '编码',
        dataIndex: 'orgCode',
        width: 40,
      },
      {
        title: '是否生产相关',
        dataIndex: 'productionRelated',
        width: 40
      }
    ];

    /**
     * 确定选择
     */
    function handleOk() {
      getSelectResult((options, values) => {
        //回传选项和已选择的值
        emit('getSelectResult', options, values);
        //关闭弹窗
        closeModal();
      });
    }

    function setValue(value) {
      selectValues.value = [value]
      selectValues.change = false
    }

    watch(()=>selectOptions.value,(options)=>{
      const matchs = options.filter(x=>x.value == selectValues.value)
      emit('getSelectResult', matchs, selectValues.value);
    })

    return {
      config,
      handleOk,
      searchInfo,
      register,
      indexColumnProps,
      visibleChange,
      queryTreeList,
      formConfig,
      getBindValue,
      columns,
      rowSelection,
      setValue
    };
  },
});
</script>
